<template>
    <div>
        <div style="margin-left: 38px; margin-top: 10px;line-height: 20px">
            <el-radio-group @change="handleSearch()" v-model="filters.dealState"
                            style="margin-bottom: 4px;margin-right: 10px">
                <el-radio-button size="medium" label="-1">所有</el-radio-button>
                <el-radio-button size="medium" label="0">待审核</el-radio-button>
                <el-radio-button size="medium" label="1">待发函</el-radio-button>
                <el-radio-button size="medium" label="2">未通过</el-radio-button>
                <el-radio-button size="medium" label="3">待递送</el-radio-button>
                <el-radio-button size="medium" label="4">未送达</el-radio-button>
                <el-radio-button size="medium" label="5">已送达</el-radio-button>
            </el-radio-group>
            <el-input
                    @keyup.enter.native="handleSearch()"
                    style="float: right;width: 250px;margin-right: 20px"
                    placeholder="证件号"
                    prefix-icon="el-icon-search"
                    v-model="filters.objIdNbr">
            </el-input>
            <el-input
                    @keyup.enter.native="handleSearch()"
                    style="float: right;width: 250px;margin-right: 20px"
                    placeholder="发函对象"
                    prefix-icon="el-icon-search"
                    v-model="filters.objName">
            </el-input>
            <el-input
                    @keyup.enter.native="handleSearch()"
                    style="float: right;width: 250px;margin-right: 20px"
                    placeholder="联系电话"
                    prefix-icon="el-icon-search"
                    v-model="filters.tel">
            </el-input>
        </div>
        <div style="background-color: #FFFFFF;margin: 0px 20px 0px 38px">
            <el-table
                    v-loading="loading" element-loading-text="数据加载中"
                    :data="domainList"
                    style="width: 100%;min-height: 300px"
                    max-height="400">
                <el-table-column prop="objIdNbr" label="证件号码" width="150"/>
                <el-table-column prop="objName" label="发函对象" width="120"/>
                <el-table-column prop="tel" label="联系电话" width="120"/>
                <el-table-column prop="address" label="递送地址" width="120"/>
                <el-table-column prop="expressOrderNo" label="快递单号" width="150"/>
                <el-table-column prop="expressDate" label="快递时间" width="150"/>
                <el-table-column prop="deliveredDate" label="送达时间" width="120"/>
                <el-table-column prop="dateCreated" label="创建时间" width="150"/>
                <el-table-column prop="dealState" label="处理状态" width="120"/>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="100">
                    <template slot-scope="scope">
                        <el-button
                                @click.native.prevent="deleteRow(scope.$index, tableData4)"
                                type="text"
                                size="small">
                            详情
                        </el-button>
                        <span style="margin-left: 5px">|</span>
                        <el-button
                                @click.native.prevent="showDocHtml(scope.row.id)"
                                type="text"
                                size="small">
                            处理
                        </el-button>

                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    slot="page"
                    :current-page="page.currentPage"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="10"
                    :total="page.totalCount"
                    layout="total, sizes, prev, pager, next, jumper"
                    style="float: right;padding: 10px 20px 10px 0px"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
            />
        </div>

        <el-dialog :title="docDialog.title" :visible.sync="docDialog.isShow" width="750px"
                   :close-on-click-modal="false"
                   @close="closeDetailDialogFn"
                   :modal="true">
            <el-row class="warp">
                <el-col :span="24" class="warp-main" v-loading="loading" element-loading-text="拼命加载中">
                    <el-row class="warp">
                        <el-col :span="24">
                            <template>
                                <div v-html="docDialog.collectionObjDocHtml"></div>
                            </template>
                        </el-col>
                    </el-row>
                    <el-row class="warp">
                        <el-col :span="24">
              <span class="dialog-footer">
                  <el-button size="medium" type="default"
                             @click="closeDialogFn(docDialog.isShow = false)">取消</el-button>
                  <el-button size="medium" type="primary" @click="submitDetailForm('detailForm')">生成催收文档</el-button>
                </span>
                        </el-col>
                    </el-row>

                </el-col>
            </el-row>


        </el-dialog>
    </div>
</template>

<script>
    import tgForm from '@/components/base/TG_FORM'
    import orderAPI from '../../api/api_order';

    export default {
        name: 'ContractObjList',
        extends: tgForm,
        components: {tgForm},
        props: {
            contractId: {
                type: String,
                required: true
            }
        },
        data() {
            return {
                filters: {
                    model: 'contractObj',
                    dealState: -1
                },
                loading: false,
                docDialog: {
                    title: '',
                    isShow: false,
                    collectionObjDocHtml: ''
                }
            }
        },
        watch: {
            filters: function (curVal, oldVal) {
                console.log(curVal);
            },
        },
        methods: {
            showDocHtml(collectionObjId) {
                console.log(collectionObjId)
                let me = this;
                orderAPI.createHtml({
                    'collectionObjId': collectionObjId
                }).then(result => {
                    me.docDialog.isShow = true;
                    me.docDialog.collectionObjDocHtml = result;
                })
            },
            closeDetailDialogFn() {
                this.docDialog.isShow = false
            }
        },
        created() {
            this.filters.contractId = this.contractId
        }
    }
</script>

<style scoped>

</style>
